<template>
    <div>
        <van-row class="top">
            <van-col span="8" class="logo">我的</van-col>
            <van-col span="16" class="logout">
                <div @click="logout">退出</div>
            </van-col>
        </van-row>
        <div class="about-me">
            <div class="name">
                <div class="nickname">{{userInfo.username}}</div>
                <span class="user-id">编号：100045</span><span class="iconfont icon-crown sw-icon"></span>
            </div>
            <div class="avatar">
                <img :src="userInfo.avatar" class="top-img" />
            </div>
        </div>
        <div class="shopping-info">
            <div class="contain">
                <div>0</div>
                <div>待付款</div>
            </div>
            <div class="contain">
                <div>0</div>
                <div>待发货</div>
            </div>
            <div class="contain">
                <div>0</div>
                <div>待收货</div>
            </div>
            <div class="contain">
                <div><span class="iconfont icon-shopping"></span></div>
                <div>全部订单</div>
            </div>
        </div>
        <div>
            <van-cell-group>
                <!-- <van-cell title="会员卡" is-link /> -->
                <van-cell title="地址管理" is-link  />
                <van-cell title="我的收藏" is-link  />
                <van-cell title="浏览记录" is-link />
                <van-cell title="联系我们" is-link  />
            </van-cell-group>

        </div>

    </div>
</template>

<script>
import userStorage from '@/utils/userStorage';
    export default {
        data() {
            return {
                userInfo: {}
            }
        },
        created() {
            // 从本地拿到用户信息
            console.log(userStorage.getUserInfo());
            this.userInfo = userStorage.getUserInfo();
        },
        methods: {
            // 登出
            logout() {
                userStorage.setUserInfo([]);
                this.$router.push("/");
            }
        }
    }
</script>

<style scoped lang="scss">
    // 顶部【我的-退出】
    .top {
        height: 2.2em;
        line-height: 2.2em;
        padding: .5rem 1rem 0 1rem;

        .logo {
            font-size: 1.5em;
            vertical-align: bottom;
        }

        .logout {
            font-size: .8rem;
            text-align: right;
            color: grey;
        }
    }
    // 我的信息展示
    .about-me {
        box-sizing: border-box;
        height: 6rem;
        padding: 0 20px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: nowrap;

        .name {
            flex: 1;

            .nickname {
                font-size: 16px;
            }
            .user-id {
                font-weight: lighter;
                font-size: 12px;
            }
            .sw-icon {
                margin-left: 2px;
                color: #ffae37;
            }
        }
        .avatar {
            flex: 1;
            text-align: right;
            .top-img {
                width: 70px;
                height: 70px;
                border-radius: 50px;
            }
        }
    }
    // 我的订单展示
    .shopping-info {
        display: flex;
        text-align: center;
        font-size: 12px;
        box-sizing: border-box;
        padding-bottom: 10px;
        
        .contain {
            flex: 1;

            div:first-child {
                font-size: 18px;
                font-weight: bold;
            }
        }
    }
</style>